<!--
 * @页面名称:
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="centermap">
    <div class="maptitle">
      <div class="zuo"></div>
      <span class="titletext">{{ title }}</span>
      <div class="you"></div>
    </div>
    <div class="mapwrap">
      <BorderBox13>
        <div class="echarts" id="mapChart"></div>
      </BorderBox13>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ECharts, EChartsOption, init } from "echarts";
import echarts from "@/utils/echarts";
import BorderBox13 from "@/components/datav/border-box/index.vue";
import mapJson from "../../../assets/china.json";

// 标题
const title = ref("各省在线人数");

let planePath: string =
  "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
const initChart = (data: any = []): ECharts => {
  const charEle = document.getElementById("mapChart") as HTMLElement;
  const charEch: ECharts = init(charEle);
  echarts.registerMap("china", mapJson as any);
  const option: EChartsOption = {
    backgroundColor: "rgba(0,0,0,0)",
    tooltip: {
      show: false
    },
    legend: {
      show: false
    },
    visualMap: {
      seriesIndex: 0,
      left: 20,
      bottom: 20,
      pieces: [
        {
          gte: 1000,
          label: "1000个以上"
        },
        {
          gte: 600,
          lte: 999,
          label: "600-999个"
        },
        {
          gte: 200,
          lte: 599,
          label: "200-599个"
        },
        {
          gte: 50,
          lte: 199,
          label: "49-199个"
        },
        {
          gte: 10,
          lte: 49,
          label: "10-49个"
        },
        {
          lte: 9,
          label: "1-9个"
        }
      ],
      inRange: {
        color: [
          "rgba(237,247,253,.8)",
          "rgba(183,225,246,.9)",
          "rgba(129,202,239,.9)",
          "rgba(56,172,229,.9)",
          "rgba(23,129,181,.9)",
          "rgba(16,90,126,0.9)"
        ]
      },
      textStyle: {
        color: "#fff"
      }
    },
    geo: {
      map: "china",
      roam: false,
      selectedMode: false,
      zoom: 1.05,
      top: 45,
      show: false
    },
    series: [
      {
        name: "MAP",
        type: "map",
        map: "china",
        data: [
          {
            name: "吉林省",
            value: 653
          },
          {
            name: "天津",
            value: 680
          },
          {
            name: "西藏自治区",
            value: 1000
          },
          {
            name: "四川省",
            value: 2
          },
          {
            name: "甘肃省",
            value: 266
          },
          {
            name: "青海省",
            value: 902
          },
          {
            name: "香港特别行政区",
            value: 372
          },
          {
            name: "陕西省",
            value: 190
          },
          {
            name: "山西省",
            value: 1088
          },
          {
            name: "海南省",
            value: 461
          }
        ],
        selectedMode: false,
        zoom: 1.05,
        geoIndex: 1,
        top: 45,
        tooltip: {
          show: true,
          formatter: function (params: any) {
            if (params.data) {
              return params.name + "：" + params.data["value"];
            } else {
              return params.name;
            }
          },
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF"
          }
        },
        label: {
          show: false,
          color: "#000",
          // position: [-10, 0],
          formatter: function (val: any) {
            // console.log(val)
            if (val.data !== undefined) {
              return val.name.slice(0, 2);
            } else {
              return "";
            }
          },
          rich: {}
        },
        emphasis: {
          label: {
            show: false
          },
          itemStyle: {
            areaColor: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(147, 235, 248, 0)"
                },
                {
                  offset: 1,
                  color: "rgba(56,155,183, .8)"
                }
              ],
              globalCoord: false
            },
            borderWidth: 1
          }
        },
        itemStyle: {
          borderColor: "rgba(147, 235, 248, .8)",
          borderWidth: 1,
          areaColor: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: "rgba(147, 235, 248, 0)"
              },
              {
                offset: 1,
                color: "rgba(147, 235, 248, .2)"
              }
            ],
            globalCoord: false
          },
          shadowColor: "rgba(128, 217, 248, .3)",
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10
        }
      },
      {
        data: [
          {
            name: "吉林省",
            value: [126.171208, 43.703954, 653]
          },
          {
            name: "西藏自治区",
            value: [88.388277, 31.56375, 1000]
          },
          {
            name: "四川省",
            value: [102.693453, 30.674545, 2]
          },
          {
            name: "甘肃省",
            value: [103.823557, 36.058039, 266]
          },
          {
            name: "青海省",
            value: [96.043533, 35.726403, 902]
          },
          {
            name: "香港特别行政区",
            value: [114.134357, 22.377366, 372]
          },
          {
            name: "陕西省",
            value: [108.887114, 35.263661, 190]
          },
          {
            name: "山西省",
            value: [112.304436, 37.618179, 1088]
          },
          {
            name: "海南省",
            value: [109.754859, 19.189767, 461]
          }
        ],
        type: "effectScatter",
        coordinateSystem: "geo",
        symbolSize: function (val: any) {
          return 4;
          // return val[2] / 50;
        },
        legendHoverLink: true,
        showEffectOn: "render",
        rippleEffect: {
          scale: 6,
          color: "rgba(255,255,255, 1)",
          brushType: "fill"
        },
        tooltip: {
          show: true,
          formatter: function (params: any) {
            if (params.data) {
              return params.name + "：" + params.data["value"][2];
            } else {
              return params.name;
            }
          },
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF"
          }
        },
        label: {
          formatter: (param: any) => {
            return param.name.slice(0, 2);
          },

          fontSize: 11,
          offset: [0, 2],
          position: "bottom",
          textBorderColor: "#fff",
          textShadowColor: "#000",
          textShadowBlur: 10,
          textBorderWidth: 0,
          color: "#FFF",
          show: true
        },
        itemStyle: {
          color: "rgba(255,255,255,1)",
          borderColor: "rgba(2255,255,255,2)",
          borderWidth: 4,
          shadowColor: "#000",
          shadowBlur: 10
        }
      }
    ]
  };
  charEch.setOption(option);
  return charEch;
};
defineExpose({
  initChart
});
</script>

<style scoped lang="scss">
.centermap {
  margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("@/views/dataScreen2/images/xiezuo.png") no-repeat;
    }

    .you {
      background: url("@/views/dataScreen2/images/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    height: 580px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;
  }
}
.echarts {
  width: 100%;
  height: 100%;
}
</style>
